<template>
    <!-- News Start-->
    <div class="wrap">
        <div class="container-xxl p-4">
            <div class="container" style="padding-top: 30px">
                <template v-if="article != undefined">
                    <h4
                        id="news-title"
                        class="mb-0 wow fadeInUp text-left mb-2"
                        data-wow-delay="0.6s"
                    >
                        {{ article.Title }}
                    </h4>
                    <div class="mb-4 wow fadeInUp des-sub" data-wow-delay="0.6s">
                        <span class="split-item" id="news-date">{{
                            fmtDate(article.UpdateTime)
                        }}</span>
                    </div>

                    <div class="line"></div>

                    <div class="news-inner wow fadeInUp des-sub" data-wow-delay="0.6s">
                        <iframe
                            ref="newsIframe"
                            width="100%"
                            :height="iframeHeight + 'px'"
                        ></iframe>
                    </div>
                </template>

                <div
                    v-if="loading"
                    class="show py-5 d-flex flex-column align-items-center justify-content-center"
                >
                    <div
                        class="spinner-border text-secondary"
                        style="width: 3rem; height: 3rem"
                        role="status"
                    >
                    </div>
                    <span class="sr-only text-secondary"></span>
                </div>
            </div>
        </div>
    </div>
    <!-- News End-->
</template>

<script setup lang="ts">
    import { nextTick, onMounted, onUnmounted, ref } from 'vue';
    import request from '@/utils/request/index';
    import { useRoute } from 'vue-router';
    import dayjs from 'dayjs';

    const route = useRoute();

    const loading = ref(false);

    const article = ref();

    const iframeHeight = ref(0);

    const newsIframe = ref<HTMLIFrameElement>();

    const fmtDate = (dateString: number) => {
        return dayjs.unix(dateString).format('YYYY-MM-DD HH:mm:ss');
    };

    const fetchDetail = async () => {
        try {
            loading.value = true;
            const resp = await request<any>({
                url: '/Notice/Details/1/' + route.query.id,
                method: 'get'
            });
            article.value = resp;
            await nextTick();
            if (newsIframe.value) {
                const doc =
                    newsIframe.value.contentDocument || newsIframe.value.contentWindow?.document;
                doc!.body.style.margin = '0px';
                doc!.body.style.background = 'transparent';
                doc!.body.style.overflow = 'hidden';
                doc!.body.style.pointerEvents = 'none';
                doc!.body.innerHTML = resp.Content;
                setTimeout(() => {
                    const { height } = doc!.body.getBoundingClientRect();
                    iframeHeight.value = height;
                }, 500);
            }
            return Promise.resolve();
        } catch (error) {
            return Promise.reject(error);
        } finally {
            loading.value = false;
        }
    };

    const setIFrameHeight = () => {
        if (!newsIframe.value) return;
        const doc = newsIframe.value.contentDocument || newsIframe.value.contentWindow?.document;
        const { height } = doc!.body.getBoundingClientRect();
        iframeHeight.value = height;
    };

    onMounted(() => {
        fetchDetail();

        window.addEventListener('resize', setIFrameHeight);
    });

    onUnmounted(() => {
        window.removeEventListener('resize', setIFrameHeight);
    });
</script>

<style>
    .wrap {
        width: 100%;
        height: auto;
        background-color: #fff;
    }
    .split-item {
        width: 100%;
        display: block;
        text-align: left;
        padding-bottom: 2px;
    }

    .split-item.fb {
        font-weight: bold;
        color: #323233;
        text-align: right;
    }

    .line {
        margin-bottom: 12px;
        border-bottom: 1px solid #eee;
    }

    .news-inner {
        min-height: 10vh;
        padding: 15px;
        background-color: #fff;
    }
</style>
